<template>
	<view class="">
		<view class="icon-title">
			<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
			<text>
				点击图标即可复制图标代码
			</text>
		</view>
		<view class="icon-box" >
			<view class="icon-item" v-for="(item,index) in iconArr" @click="clickCopy(item)" >
					<text :class="`iconfont ${item}`"></text>
					<view>{{item}}</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {icon} from "@/common/tool/icon.js"
	export default {
		name:"ui-icon",
		data() {
			return {
				iconArr: icon
			};
		},
		methods:{
			clickCopy(icon){
				uni.setClipboardData({data: icon});
			}
		}
	}
</script>

<style scoped lang="scss" >
	.icon-title{
		display: flex;
		align-items: center;
		gap:10px;
		color:#777;
		border-bottom:1px solid $uni-border-color;
		margin-bottom:10px;
	}
	.icon-item{
		width:122px;
		color:#666;
		padding:5px;
		text-align: center;
		cursor: pointer;
		overflow: hidden;
		transform: scale(1.0); /* 鼠标悬停时放大更多 */
		transition: transform 0.3s ease;
		border:1px solid #f4f4f4;
		.iconfont{
			font-size:32px;
		}
	}
	.icon-item:hover{
		color: $uni-color-primary ;
		transform: scale(1.1); /* 鼠标悬停时放大更多 */
	}
	.icon-box{
		width: 100%;
		height:478px;
		display: flex;
		flex-wrap:wrap;
		gap:10px;
		overflow: auto;
		padding:15px 0;
	}
	/* 高级用法-滚动条样式 */
	.icon-box::-webkit-scrollbar {
			width:5px;/*  设置纵轴（y轴）轴滚动条 */
			height: 20px;/*  设置横轴（x轴）轴滚动条 */
		}
	/* 滚动条滑块（里面小方块） */
	.icon-box::-webkit-scrollbar-thumb {
		border-radius:3px;
		background: #888;
	}
		/* 滚动条轨道 */
	.icon-box::-webkit-scrollbar-track {
		border-radius: 0;
		background: #f8f8f8;
	}
	
</style>